<template>
    <!-- model用来绑定数据，rules用来绑定校验规则，应该是:model 和 :rules, ref相当于是一个名字，用于后续的处理 -->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- rules里面的name， 就是我们的要检测的 -->
        <el-form-item label="图书名称" prop="name">
            <el-input type="name" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
            <el-input type="author" v-model="ruleForm.author" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publish">
            <!-- v-model.trim用来去除后面的空格 -->
            <el-input v-model.trim="ruleForm.publish"></el-input>
        </el-form-item>
        <el-form-item label="页数" prop="pages">
            <!-- v-model.number用来获取这个数字,有时候需要 -->
            <el-input v-model.number="ruleForm.pages"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input v-model.number="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <!-- <el-button @click="test">test</el-button> -->
        </el-form-item>
    </el-form>
</template>


<script>
    export default {
        name: "AddBook",
        data() {
            let validateName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('书名不能为空'));
                }
                setTimeout(() => {
                    if (value == "" || value.length == 0) {
                        callback(new Error('书名不能为空字符串'));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            // 使用函数的方式来验证
            let validatePrice = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('价格不能为空'));
                }
                setTimeout(() => {
                    if (value < 0) {
                        callback(new Error('价格不能为负数'));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return {
                ruleForm: {
                    name: '',
                    author: '',
                    publish: '',
                    pages: '',
                    price: ''
                },
                rules: {
                    name: [
                        // 验证的方法， blur是触发的时机， 失去焦点的时候
                        {validator: validateName, trigger: 'blur'}
                    ],
                    author: [
                        {required: true, message: '作者名必须填写', trigger: 'blur'}
                    ],
                    publish: [
                        {required: true, message: '出版社必须填写', trigger: 'blur'}
                    ],
                    pages: [
                        {required: true, message: '页数必须填写', trigger: 'blur'},
                        {type: 'number', message: '页数必须为数字值', trigger: 'blur'}
                    ],
                    price: [
                        // required 为true, 就有一个红色的小星号， 可以与validator一起配合使用
                        {required: true, message: '价格必须填写', trigger: 'blur'},
                        {validator: validatePrice, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            test() {
                console.log(this.ruleForm)
            },
            submitForm(formName) {
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('校验通过!');
                        // 在此处我们就需要把提交的数据，传给后台，让后台处理
                        axios.post('http://localhost:8991/book/savebook', this.ruleForm).then(function (resp) {
                            if (resp.data == 'success') {
                                // alert('添加成功')
                                // _this.$message({
                                //     showClose: true,
                                //     message: '添加成功',
                                //     type: 'success'
                                // });
                                _this.$notify({
                                    title: '成功',
                                    message: '《' + _this.ruleForm.name + '》添加成功！',
                                    type: 'success'
                                });
                                // 路由跳转
                                _this.$router.push('/BookManage')
                            } else {
                                // alert('添加失败')
                                _this.$message({
                                    showClose: true,
                                    message: '添加失败！',
                                    type: 'error'
                                });
                            }
                        })
                    } else {
                        console.log('校验失败！');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>